<template>
  <div class="page-container">
    <div class="flex justify-between items-center">
      <div>
        <h1 class="page-title">系统设置</h1>
        <div class="breadcrumb-container">
          <ul>
            <li><a @click="router.push('/')">首页</a></li>
            <li>系统设置</li>
          </ul>
        </div>
      </div>
      <div class="btn-group">
        <button class="btn" @click="resetSettings">重置设置</button>
        <button class="btn btn-primary" @click="saveSettings" :disabled="isSaving">
          <span v-if="isSaving" class="loading loading-spinner"></span>
          {{ isSaving ? '保存中...' : '保存设置' }}
        </button>
      </div>
    </div>

    <div class="card-container">
      <!-- 基本设置 -->
      <div class="card-content lg:col-span-2">
        <div class="card-body-custom">
          <h2 class="section-title">基本设置</h2>
          <div class="form-group">
            <div class="input-group">
              <label class="label">
                <span class="input-label">系统名称</span>
              </label>
              <input
                type="text"
                v-model="settings.systemName"
                placeholder="请输入系统名称"
                class="input input-bordered w-full"
              />
            </div>
            <div class="input-group">
              <label class="label">
                <span class="input-label">系统描述</span>
              </label>
              <input
                type="text"
                v-model="settings.systemDescription"
                placeholder="请输入系统描述"
                class="input input-bordered w-full"
              />
            </div>
            <div class="input-group">
              <label class="label">
                <span class="input-label">管理员邮箱</span>
              </label>
              <input
                type="email"
                v-model="settings.adminEmail"
                placeholder="请输入管理员邮箱"
                class="input input-bordered w-full"
              />
            </div>
            <div class="input-group">
              <label class="label">
                <span class="input-label">系统语言</span>
              </label>
              <select v-model="settings.language" class="select select-bordered w-full">
                <option value="zh-CN">简体中文</option>
                <option value="en-US">English</option>
              </select>
            </div>
          </div>
        </div>
      </div>

      <!-- 主题设置 -->
      <div class="card-content">
        <div class="card-body-custom">
          <h2 class="section-title">主题设置</h2>
          <div class="space-y-4">
            <div class="input-group">
              <label class="label">
                <span class="input-label">主题模式</span>
              </label>
              <select v-model="settings.theme" class="select select-bordered w-full">
                <option value="light">浅色模式</option>
                <option value="dark">深色模式</option>
                <option value="system">跟随系统</option>
              </select>
            </div>
            <div class="input-group">
              <label class="label">
                <span class="input-label">主题色</span>
              </label>
              <div class="flex flex-wrap gap-2">
                <div
                  v-for="color in themeColors"
                  :key="color.value"
                  class="w-8 h-8 rounded-lg cursor-pointer"
                  :class="{ 'ring-2 ring-primary ring-offset-2': settings.primaryColor === color.value }"
                  :style="{ backgroundColor: color.value }"
                  @click="settings.primaryColor = color.value"
                ></div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 通知设置 -->
      <div class="card-content lg:col-span-2">
        <div class="card-body-custom">
          <h2 class="section-title">通知设置</h2>
          <div class="space-y-4">
            <div class="form-control">
              <label class="label cursor-pointer">
                <span class="label-text">启用邮件通知</span>
                <input type="checkbox" v-model="settings.emailNotification" class="toggle" />
              </label>
            </div>
            <div class="form-control">
              <label class="label cursor-pointer">
                <span class="label-text">启用系统通知</span>
                <input type="checkbox" v-model="settings.systemNotification" class="toggle" />
              </label>
            </div>
            <div class="form-control">
              <label class="label cursor-pointer">
                <span class="label-text">启用声音提醒</span>
                <input type="checkbox" v-model="settings.soundNotification" class="toggle" />
              </label>
            </div>
          </div>
        </div>
      </div>

      <!-- 安全设置 -->
      <div class="card-content">
        <div class="card-body-custom">
          <h2 class="section-title">安全设置</h2>
          <div class="space-y-4">
            <div class="form-control">
              <label class="label cursor-pointer">
                <span class="label-text">启用两步验证</span>
                <input type="checkbox" v-model="settings.twoFactorAuth" class="toggle" />
              </label>
            </div>
            <div class="form-control">
              <label class="label cursor-pointer">
                <span class="label-text">自动锁定</span>
                <input type="checkbox" v-model="settings.autoLock" class="toggle" />
              </label>
            </div>
            <div class="input-group">
              <label class="label">
                <span class="input-label">锁定时间（分钟）</span>
              </label>
              <input
                type="number"
                v-model="settings.lockTimeout"
                placeholder="请输入锁定时间"
                class="input input-bordered w-full"
                :disabled="!settings.autoLock"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const isSaving = ref(false)

interface Settings {
  systemName: string
  systemDescription: string
  adminEmail: string
  language: string
  theme: string
  primaryColor: string
  emailNotification: boolean
  systemNotification: boolean
  soundNotification: boolean
  twoFactorAuth: boolean
  autoLock: boolean
  lockTimeout: number
}

const settings = ref<Settings>({
  systemName: '地府管理系统',
  systemDescription: '一个现代化的地府管理系统',
  adminEmail: 'admin@example.com',
  language: 'zh-CN',
  theme: 'light',
  primaryColor: '#1d4ed8',
  emailNotification: true,
  systemNotification: true,
  soundNotification: false,
  twoFactorAuth: false,
  autoLock: true,
  lockTimeout: 30,
})

const themeColors = [
  { name: '蓝色', value: '#1d4ed8' },
  { name: '绿色', value: '#059669' },
  { name: '红色', value: '#dc2626' },
  { name: '紫色', value: '#7c3aed' },
  { name: '橙色', value: '#ea580c' },
  { name: '粉色', value: '#db2777' },
]

const saveSettings = async () => {
  isSaving.value = true
  try {
    // TODO: 调用API保存设置
    await new Promise((resolve) => setTimeout(resolve, 1000))
    // 显示成功提示
  } catch (error) {
    // 显示错误提示
    console.error('保存设置失败:', error)
  } finally {
    isSaving.value = false
  }
}

const resetSettings = () => {
  // TODO: 重置设置
}
</script>

<style scoped>
.theme-color {
  @apply w-8 h-8 rounded-lg cursor-pointer transition-all duration-200;
}

.theme-color:hover {
  @apply opacity-80;
}

.theme-color.active {
  @apply ring-2 ring-primary ring-offset-2;
}
</style>
